import React  from 'react'
import {Icon} from 'antd-mobile'
import SwipeableViews from 'react-swipeable-views';
import wx from 'weixin-js-sdk'
import history from '../../history'
import './index.less'


export default class Resource extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            images: []
        }
    }
    handleImagePreview = (images, previewIndex) => {
        var ua = window.navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            let arr = []
            images.forEach( item => {
                arr.push('http:'+item.file)
            })
            wx.previewImage({
                current: arr[previewIndex],
                urls: arr
            });
        } else {
			this.setState({images, previewIndex});
		}
    }
    render() {
        const imgs = this.props.resource.filter( x => /.+\.(png|jpg|gif|jpeg)$/.test(x.file)),
            files = this.props.resource.filter( x => ! /.+\.(png|jpg|gif|jpeg)$/.test(x.file))
        return (
            <React.Fragment>
                <div className='res-imgs'>
                    {
                        imgs.map( (v, i) =>
                            <div key={i} onClick={() => this.handleImagePreview(imgs, i)}>
                                <img src={`${v.file}?imageView2/2/w/100/h/100`}/>
                            </div>
                        )
                    }
                </div>
                <div className='res-files'>
                {
                    files.map( (v, i) => 
                        <a onClick={() => history.push(`/download?url=${encodeURIComponent(v.file)}`)}>
                        {decodeURIComponent(v.file.split('/').pop())}
                        </a>
                    )
                }
                </div>
                {
                    this.state.images.length > 0 ? 
                        <div className='mask'>
                            <SwipeableViews index={this.state.previewIndex}>
                                {
                                    this.state.images.map( (item,i) => {
                                        return(
                                            <div key={i} style={{height:document.documentElement.clientHeight,position:'relative'}} >
                                                <img src={`${item.file}?imageView2/2/w/1200/h/1200`} />
                                            </div>
                                        )
                                    })
                                }
                            </SwipeableViews>
                            <Icon type="cross" size='md' color='white' 
                                style={{position: 'absolute',right: '10px',top: '10px',}} 
                                onClick={() => this.setState({images: []})}
                            />
                        </div>
                    : null
			    }
            </React.Fragment>
        )
    }
}

Resource.defaultProps = {
    resource: [{file:''}],
}